/**
 * 封装半圆进度插件
 * author aty
 */

function Semicircle(options){
	this.options = {
		el:"",
		rate:0,
		linearColor:['rgba(18,99,243,1)','rgba(36,85,232,0.5)'],
		name:"",
		lineWidth:8,
		lineHeight:6,
		nameFontSize:16,
		rateFontSize:16,
		rateColor:"#ffffff",
		nameColor:"#ffffff",
		lineMargin:17,
		baseCircleColor:"rgba(26,43,167,0.2)",
		nameBottom:6
	}

	$.extend(this.options,options);

	if(!options.el){
		throw new Error("Dialog error:', '缺少el参数");
	}
	this.init();
	
}

Semicircle.prototype.init = function(){
	let self = this;
	this.canvas = document.querySelector(this.options.el);
	this.canvasWidth = this.canvas.offsetWidth;
	this.canvasHeight = this.canvas.offsetHeight;
	this.canvas.width = this.canvasWidth;
	this.canvas.height = this.canvasHeight;
	this.context = this.canvas.getContext('2d');
	this.centerX = Math.floor(this.canvasWidth / 2), 
	this.centerY = Math.floor(this.canvasHeight/1.5), 
	this.rad = Math.PI / 100, 
	this.speed = 0;


	// 创建渐变
	this.grd = this.context.createLinearGradient(this.options.lineMargin,this.canvasHeight,this.canvasWidth-this.options.lineMargin*2,this.canvasHeight);
	self.grd.addColorStop(0,this.options.linearColor[0]);
	// 颜色渐变数组
	this.options.linearColor.forEach(function(ele,i){
		var len = self.options.linearColor.length;
		if(i<len-1){
			let r = ( 1/len ).toFixed(1);
			self.grd.addColorStop(((i+1)*r).toFixed(1),ele);
		}
	});

	self.grd.addColorStop(1,this.options.linearColor[this.options.linearColor.length-1]);
	

	;(function drawFrame() {
		var timer = null;
	  	if (self.speed > parseInt(Number(self.options.rate))){
	  		cancelAnimationFrame(timer);return;
	  	}
  		timer = window.requestAnimationFrame(drawFrame, self.canvas);
  		self.context.clearRect(0, 0, self.canvasWidth, self.canvasHeight);

	  	self.baseCircle();
		self.sportCircle(self.speed);
		self.bottomLine();
		self.buildText(self.speed);

	  	self.speed += 1;
	})()
}

Semicircle.prototype.baseCircle = function(){
	this.context.save();
  	this.context.beginPath();
  	this.context.strokeStyle = this.options.baseCircleColor;
  	this.context.lineWidth = this.options.lineWidth;
  	this.context.lineCap = 'butt';
  	this.context.arc(this.centerX, this.centerY, this.canvasHeight/2, Math.PI, 2*Math.PI , false);
  	this.context.stroke();
  	this.context.closePath();
  	this.context.restore();
}

Semicircle.prototype.sportCircle = function( n ){
	this.context.save();
  	this.context.beginPath();
  	this.context.strokeStyle = this.grd;
  	this.context.lineWidth = this.options.lineWidth;
  	this.context.lineCap = 'butt';
  	this.context.arc(this.centerX, this.centerY, this.canvasHeight/2 ,Math.PI, Math.PI + (n * this.rad),  false);
  	this.context.stroke();
  	this.context.restore();
}

Semicircle.prototype.bottomLine = function(){
	this.context.save();
	this.context.beginPath();
	this.context.fillStyle = this.grd;
	this.context.lineCap = 'round';
	this.context.fillRect(this.options.lineMargin, this.canvasHeight/1.35, this.canvasWidth - this.options.lineMargin*2, this.options.lineHeight);
	this.context.closePath();
}

Semicircle.prototype.buildText = function( n ){
	this.context.save();
  	this.context.fillStyle = this.options.rateColor;
  	this.context.font = this.options.rateFontSize + "px Arial";
  	this.context.textAlign = "center";
  	this.context.textBaseline = "bottom";

  	// 默认显示百分比
  	var value = n.toFixed(0) + "%";

  	// 如果传入的是值则不显示百分比
  	if(this.options.hasOwnProperty("value")){
  		value = this.options.value;
  	}
  	
  	this.context.fillText( value, this.centerX, this.centerY/1.1 );
  	this.context.restore();

  	this.context.textAlign = "center";
  	this.context.fillStyle = this.options.nameColor;
  	this.context.font = this.options.nameFontSize + "px Arial";
  	this.context.fillText(this.options.name, this.centerX, this.canvasHeight - this.options.nameBottom);
}



